<template>
  <div class="u-p-20">
    <el-card shadow="never">
      <div slot="header">
        <b class="u-f-16">
          <span v-if="objForm.id">编辑</span>
          <span v-else>添加</span>商品导航分类
        </b>
        <div class="u-right u-5mt">
          <el-button
            type="success"
            size="small"
            icon="el-icon-document-checked"
            @click="submitForm('objForm')"
            v-if="hasPerm('navbarEditPost')"
            >提交保存</el-button
          >
          <el-button size="small" icon="el-icon-back" @click="$router.go(-1)"
            >返回</el-button
          >
        </div>
      </div>
      <el-form
        :model="objForm"
        :rules="rules"
        ref="objForm"
        label-width="100px"
        class="u-form"
      >
        <el-form-item label="名称">
          <el-input v-model="objForm.name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="goods_navbar">
          <upload
            file-folder="goods_navbar"
            :file-arr="fileList"
            list-type="picture-card"
            :limit="1"
            accept="image/jpeg, image/png"
            tips="只能上传jpg/png文件，且不超过4MB"
            @getUploadFiles="getUploadFiles"
          ></upload>
        </el-form-item>
        <el-form-item label="跳转链接">
          <el-input v-model="objForm.url" placeholder="请输入链接"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number
            v-model="objForm.sort"
            :min="0"
            label="排序"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="展示类型">
          <el-select v-model="objForm.type" placeholder="请选择">
            <el-option
              v-for="item in typeTree"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否敏感分类">
          <el-switch
            v-model="objForm.special"
            active-color="#13ce66"
            :active-value="1"
            inactive-color="#666"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
        <el-form-item label="是否开启">
          <el-switch
            v-model="objForm.status"
            active-color="#13ce66"
            :active-value="0"
            inactive-color="#666"
            :inactive-value="1"
          ></el-switch>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import Upload from "@/components/upload/upload";
import commonEdit from "@/mixins/common-edit";
export default {
  components: {
    Upload,
  },
  mixins: [commonEdit],
  data() {
    return {
      apiName: "navbar",
      backRoute: "navbarIndex", //成功跳转地址
      fileList: [],
      objForm: {
        id: "",
        name: "", //名称
        tag: "", //敏感标签
        sort: 0, //排序
        type:1,
        order: "", //商品排序规则
        status: 0, //状态
      },
      typeTree:[
        {
          id:1,
          name:"导航模块",
        },
          {
          id:2,
          name:"商品列表",
        }
      ]
    };
  },
  methods: {
    afterGetInfo() {
      if (this.objForm.icon) {
        this.fileList = [
          {
            name: "goods_navbar",
            url: this.objForm.icon,
          },
        ];
      }
    },
    getUploadFiles(files) {
      this.fileList = files;
      this.objForm.icon = files[0]["url"];
    },
  },
  created() {
    if (this.$route.params.id) {
      this.objForm.id = this.$route.params.id;
    }
  },
};
</script>
